<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lumina AI - 内容管理后台</title>
    <script src="../frontend/assets/js/tailwindcss.js"></script>
    <link href="../frontend/assets/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 导入字体 */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
        
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
        }
        
        /* 背景样式（浅色） */
        .login-bg {
            background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        
        .login-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(255, 228, 92, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.10) 0%, transparent 50%),
                radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.10) 0%, transparent 50%);
            opacity: 0.4;
        }
        
        /* 登录卡片 */
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            border-radius: 24px;
            padding: 2rem;
            width: 100%;
            max-width: 28rem;
            position: relative;
            z-index: 10;
        }
        
        /* 输入框样式 */
        .input-focus:focus {
            border-color: #FFE45C;
            box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.2);
            transform: translateY(-1px);
            outline: none;
        }
        
        .form-input {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }
        
        .form-input:focus {
            border-color: #FFE45C;
            box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.2);
            transform: translateY(-1px);
        }
        
        /* 按钮样式 */
        .btn-primary {
            background: linear-gradient(135deg, #FFE45C 0%, #FFF9C4 100%);
            color: #222;
            transition: all 0.3s ease;
            border: none;
            position: relative;
            overflow: hidden;
            width: 100%;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1.125rem;
            cursor: pointer;
        }
        
        .btn-primary:hover {
            background: #FFE45C;
            color: #111;
            box-shadow: 0 10px 25px rgba(255, 228, 92, 0.4);
            transform: translateY(-2px);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        /* 动画效果 */
        .floating-animation {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .slide-up {
            animation: slideUp 0.6s ease-out 0.2s both;
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 卡片悬浮效果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(255, 228, 92, 0.2);
        }
        
        /* 主题色 */
        .text-theme {
            color: #FFE45C;
        }
        
        .bg-theme {
            background-color: #FFE45C;
        }
        
        .border-theme {
            border-color: #FFE45C;
        }
        
        /* 背景装饰 */
        .bg-decoration {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.2;
            pointer-events: none;
        }
        
        .bg-decoration.yellow {
            background: #FFE45C;
            width: 128px;
            height: 128px;
            top: 5rem;
            left: 5rem;
            animation: floating 3s ease-in-out infinite;
        }
        
        .bg-decoration.blue {
            background: #3B82F6;
            width: 160px;
            height: 160px;
            bottom: 5rem;
            right: 5rem;
            animation: floating 3s ease-in-out infinite;
            animation-delay: -1.5s;
        }
        
        .bg-decoration.purple {
            background: #8B5CF6;
            width: 96px;
            height: 96px;
            top: 50%;
            left: 25%;
            animation: floating 3s ease-in-out infinite;
            animation-delay: -0.5s;
        }
        
        /* 表单组样式 */
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.5rem;
        }
        
        .form-label i {
            color: #FFE45C;
            margin-right: 0.5rem;
        }
        
        /* 复选框样式 */
        .checkbox-wrapper {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .checkbox-wrapper input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
            color: #FFE45C;
            border-color: #d1d5db;
            border-radius: 4px;
            margin-right: 0.5rem;
        }
        
        /* 链接样式 */
        .link {
            color: #FFE45C;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .link:hover {
            color: #F59E0B;
        }
        
        /* 右上角首页链接样式 */
        .home-link {
            background: rgba(255, 228, 92, 0.1);
            border: 1px solid rgba(255, 228, 92, 0.2);
            border-radius: 20px;
            padding: 6px 12px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .home-link:hover {
            background: rgba(255, 228, 92, 0.2);
            border-color: rgba(255, 228, 92, 0.4);
            transform: translateY(-1px);
        }
        
        /* 测试账号样式 */
        .test-accounts {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }
        
        .test-accounts-title {
            font-size: 0.75rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .account-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
            font-size: 0.75rem;
        }
        
        .account-item:last-child {
            margin-bottom: 0;
        }
        
        .account-label {
            color: #6b7280;
        }
        
        .account-value {
            font-family: 'Courier New', monospace;
            color: #374151;
        }
        
        /* 错误弹窗样式 */
        .error-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }
        
        .error-modal.show {
            display: flex;
        }
        
        .error-content {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            max-width: 24rem;
            margin: 0 1rem;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .error-content.show {
            transform: scale(1);
            opacity: 1;
        }
        
        .error-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .error-icon {
            width: 3rem;
            height: 3rem;
            background: #fef2f2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }
        
        .error-icon i {
            color: #ef4444;
            font-size: 1.25rem;
        }
        
        .error-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #111827;
        }
        
        .error-subtitle {
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        .error-message {
            color: #374151;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .error-button {
            width: 100%;
            background: #ef4444;
            color: white;
            border: none;
            padding: 0.75rem 1rem;
            border-radius: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .error-button:hover {
            background: #dc2626;
            transform: scale(1.05);
        }

        /* Emoji 动画元素 */
        #emojiLayer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 20;
        }
        .emoji {
            position: fixed;
            will-change: transform, opacity;
            user-select: none;
            pointer-events: none;
            line-height: 1;
            transform: translate(-9999px, -9999px);
        }

        /* 顶部提示文案 */
        .hint-banner {
            position: fixed;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(17, 24, 39, 0.6);
            color: #fff;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.2px;
            z-index: 30;
            backdrop-filter: saturate(140%) blur(6px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        }
        
        /* 响应式设计 */
        @media (max-width: 640px) {
            .login-card {
                margin: 1rem;
                padding: 1.5rem;
            }
            
            .bg-decoration {
                display: none;
            }
        }
    </style>
</head>
<body class="login-bg">
    <!-- 提示文案 -->
    <div class="hint-banner">单击鼠标召唤emoji</div>

    <!-- 背景装饰元素 -->
    <div class="bg-decoration yellow"></div>
    <div class="bg-decoration blue"></div>
    <div class="bg-decoration purple"></div>
     <!-- 登录内容卡片 -->
    <div class="login-card fade-in relative">
        <!-- 左上角前端首页链接 -->
        <div class="" style="margin-left: auto; width: 108px;">
            <a href="../frontend/index.html" class="link home-link text-sm">
                <i class="fas fa-home mr-1"></i>前端首页
            </a>
        </div>
        
        <!-- 标题区（简洁版） -->
        <div class="text-center mb-6 slide-up">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-2xl mb-4">
                <i class="fas fa-brain text-white text-2xl"></i>
            </div>
            <h1 class="text-gray-800 mb-1" style="font-size: 1.75rem; font-weight: 700; font-family: 'Montserrat', Arial, sans-serif;">
                <span class="text-theme">Lumina</span> AI
            </h1>
            <!-- <p class="text-gray-600" style="font-size: 0.95rem;">内容管理后台</p> -->
        </div>

        <!-- Login Form -->
        <form id="loginForm" class="slide-up">
            <div class="form-group">
                <label for="username" class="form-label">
                    <i class="fas fa-user"></i>用户名
                </label>
                <input 
                    type="text" 
                    id="username" 
                    name="username" 
                    required
                    class="form-input"
                    placeholder="请输入用户名"
                >
            </div>

            <div class="form-group">
                <label for="password" class="form-label">
                    <i class="fas fa-lock"></i>密码
                </label>
                <input 
                    type="password" 
                    id="password" 
                    name="password" 
                    required
                    class="form-input"
                    placeholder="请输入密码"
                >
            </div>

            <div class="flex items-center justify-between mb-6">
                <label class="checkbox-wrapper">
                    <input type="checkbox" id="remember">
                    <span class="text-sm text-gray-600">记住我</span>
                </label>
                <a href="#" class="link text-sm">忘记密码？</a>
            </div>

            <button type="submit" class="btn-primary">
                <i class="fas fa-sign-in-alt mr-2"></i>登录
            </button>
        </form>

        <!-- 底部信息（保持简洁） -->
        <div class="mt-6 text-center slide-up">
            <div class="test-accounts">
                <p class="test-accounts-title">测试账号</p>
                <div class="account-item"><span class="account-label">管理员：</span><span class="account-value">admin / admin123</span></div>
                <div class="account-item"><span class="account-label">编辑者：</span><span class="account-value">editor / editor123</span></div>
            </div>
        </div>
    </div>

    <!-- Error Modal -->
    <div id="errorModal" class="error-modal">
        <div class="error-content" id="errorModalContent">
            <div class="error-header">
                <div class="error-icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div>
                    <h3 class="error-title">登录失败</h3>
                    <p class="error-subtitle">请检查您的凭据</p>
                </div>
            </div>
            <p id="errorMessage" class="error-message">用户名或密码错误</p>
            <button onclick="closeErrorModal()" class="error-button">
                确定
            </button>
        </div>
    </div>

    <!-- Emoji 动画层 -->
    <div id="emojiLayer"></div>

    <script src="js/auth.js"></script>
    <script>
        // 错误弹窗动画
        function showErrorModal() {
            const modal = document.getElementById('errorModal');
            const content = document.getElementById('errorModalContent');
            if (modal && content) {
                modal.classList.add('show');
                setTimeout(() => {
                    content.classList.add('show');
                }, 10);
            }
        }
        
        function closeErrorModal() {
            const modal = document.getElementById('errorModal');
            const content = document.getElementById('errorModalContent');
            if (modal && content) {
                content.classList.remove('show');
                setTimeout(() => {
                    modal.classList.remove('show');
                }, 200);
            }
        }
        
        // 重写原有的showError函数
        if (window.authManager) {
            window.authManager.showError = function(message) {
                const errorMessage = document.getElementById('errorMessage');
                if (errorMessage) {
                    errorMessage.textContent = message;
                }
                showErrorModal();
            };
        }

        // ==========================
        // Emoji 物理动画（重力+碰撞）
        // ==========================
        (function () {
            const EMOJIS = ['😀','😄','😆','😊','😎','🤩','🥳','🤖','✨','🌟','🔥','💫','🫧','💥','💡','🧠','🎯','🚀','🍋','💛'];
            const layer = document.getElementById('emojiLayer');
            const gravity = 1200; // px/s^2
            const drag = 0.02; // 空气阻尼
            const restitution = 0.6; // 碰撞回弹系数
            const lifetime = 3000; // 每个表情最大生命周期 ms
            const sizeRange = [20, 42]; // 字体大小范围 px

            const active = new Set();

            function rand(min, max) { return Math.random() * (max - min) + min; }
            function choice(arr) { return arr[Math.floor(Math.random()*arr.length)]; }

            function spawnAt(x, y) {
                const count = Math.floor(rand(6, 12));
                for (let i = 0; i < count; i++) {
                    const el = document.createElement('div');
                    el.className = 'emoji';
                    el.textContent = choice(EMOJIS);
                    const size = rand(sizeRange[0], sizeRange[1]);
                    el.style.fontSize = `${size}px`;
                    el.style.left = '0px';
                    el.style.top = '0px';
                    layer.appendChild(el);

                    const angle = rand(-Math.PI/2 - 0.6, -Math.PI/2 + 0.6);
                    const speed = rand(250, 520);
                    const vx = Math.cos(angle) * speed;
                    const vy = Math.sin(angle) * speed; // 初速度向上

                    const obj = {
                        el,
                        x,
                        y,
                        vx,
                        vy,
                        w: size,
                        h: size,
                        birth: performance.now(),
                        rotation: rand(-30, 30),
                        vr: rand(-180, 180),
                        opacity: 1
                    };
                    active.add(obj);
                }
                requestTick();
            }

            let ticking = false;
            function requestTick() {
                if (!ticking) {
                    ticking = true;
                    requestAnimationFrame(step);
                }
            }

            function step(ts) {
                ticking = false;
                const vw = window.innerWidth;
                const vh = window.innerHeight;
                const dt = 1/60; // 固定时间步，稳定碰撞

                const toRemove = [];
                active.forEach(obj => {
                    // 物理积分（阻尼）
                    obj.vy += gravity * dt;
                    obj.vx *= (1 - drag);
                    obj.vy *= (1 - drag);
                    obj.x += obj.vx * dt;
                    obj.y += obj.vy * dt;

                    // 旋转和透明度
                    obj.rotation += obj.vr * dt;
                    const age = performance.now() - obj.birth;
                    if (age > lifetime * 0.6) {
                        obj.opacity = Math.max(0, 1 - (age - lifetime * 0.6) / (lifetime * 0.4));
                    }

                    // 边界碰撞
                    const radius = obj.w * 0.5;
                    // 地面
                    if (obj.y + radius > vh) {
                        obj.y = vh - radius;
                        obj.vy = -Math.abs(obj.vy) * restitution;
                        obj.vx *= 0.85;
                    }
                    // 天花板
                    if (obj.y - radius < 0) {
                        obj.y = radius;
                        obj.vy = Math.abs(obj.vy) * restitution;
                    }
                    // 左右墙
                    if (obj.x - radius < 0) {
                        obj.x = radius;
                        obj.vx = Math.abs(obj.vx) * restitution;
                    }
                    if (obj.x + radius > vw) {
                        obj.x = vw - radius;
                        obj.vx = -Math.abs(obj.vx) * restitution;
                    }

                    // 应用样式
                    obj.el.style.transform = `translate(${obj.x - radius}px, ${obj.y - radius}px) rotate(${obj.rotation}deg)`;
                    obj.el.style.opacity = obj.opacity.toFixed(3);

                    // 生命周期结束
                    if (performance.now() - obj.birth > lifetime || obj.opacity <= 0.02) {
                        toRemove.push(obj);
                    }
                });

                // 清理
                toRemove.forEach(o => {
                    active.delete(o);
                    if (o.el && o.el.parentNode) o.el.parentNode.removeChild(o.el);
                });

                if (active.size > 0) requestTick();
            }

            // 点击事件
            window.addEventListener('click', (e) => {
                spawnAt(e.clientX, e.clientY);
            });
        })();
    </script>
</body>
</html>
